<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<link rel="stylesheet" href="gadgets.css" type="text/css" />

<title>Area Chart</title>
</head>

<body>


<h1 class="title">Liquid Diagrams</h1>

<p class="title">
&copy;2009 Martin Lessacher<br/>
</p>


<h2 class="title">Area Chart</h2>
<p>Area charts are very similar to line charts. Like in line charts, the data points of each entity are
drawn and then connected by lines to give an entity characteristic line. The main difference is that the
area beneath the characteristic line is filled. The resulting areas can be easily compared. The benefit of
line charts to reveal trends in the data is maintained. The most common types of area charts are stacked
area charts and overlay area charts.<p>

<br />
<table width="1100" border="0" cellspacing="10">
  <tr>
    <td><a href="images/areachart_stacked.png"><img class="center" src="images/areachart_stacked.png" alt="The Liquid Diagrams stacked area chart visualisation." width="500" height="350"/></a></td>
    <td><a href="images/areachart_overlay.png"><img class="center" src="images/areachart_overlay.png" alt="The Liquid Diagrams overlay area chart visualisation." width="500" height="350"/></a></td>
  </tr>
</table>
<br/>

<h2 class="title">Features</h2>

<b>Different types of area charts</b><br/>
<p>There are two different types of area charts available. This type of the visualisation
can be dynamically switched by using the gadget options to the left of the visualisation.</p><br/>

<b>Display in percent</b><br/>
<p>The user can select to display the areas according to their percental share of the summed up values.
This leads to a better use of the available space and to better comparable area presentations.</p><br/>

<b>Changing the colours of entities</b><br/>
<p>Initially the colours used in a visualisation depend on the chosen colour scheme. Colour schemes
are colour palettes that define a limited amount of colours that are used in a visualisation. The 
colour schemes where taken from <a href="http://de-de.colourlovers.com">COLOURLovers</a>. If a colour scheme has
less colours defined than entities are present in a data set the colours are repeated.</p>

<p>All colours used to draw entities can be changed by using a colour picker. To change the colour of a specific entity the user has to
click on the colour rectangle, representing the entities colour, in the legend panel. This will bring
up the colour picker. After selecting the colour the selection is verified with the Ok button and the
colour is immediately assigned to the entity.</p><br/>

<b>Changing fonts</b><br/>
<p>All the fonts used in the visualisations can be replaced by other fonts. To do this the user has to switch
to the "Font" panel in the options and choose a font colour, size and type for the desired font 
category. When using the corresponding buttons it is possible to set the font style to bold, italic and 
underline. The selected fonts are loaded on runtime into the gadget.</p><br/>

<b>Hide single entities</b><br/>
<p>Entities can be hidden by clicking on an entities name in the legend panel while holding down the
ALT key. Clicking once more will show the entity again.</p><br/>

<b>Select single or multiple entities</b><br/>
<p>To select an entity the user has to click on the entities name. The selection of an entity will partially
fade all non selected entities. Multiple selections can be made by holding down the CRTL
key while selecting additional entities.</p><br/>

<b>Changing diagram titles</b><br/>
<p>The user can dynamically alter the diagram title, the x-axis title, and the y-axis tile by clicking on
the appropriate label. A text box will then appear to enter the new title. The edit process is finished
by confirming the changes with the enter key.</p><br/>

<b>Transpose the data</b><br/>
<p>All Liquid Diagrams Gadgets offer a function to transpose data. This is especially useful if the
data is in the wrong format and it would take several minutes to transpose it by using other applications.
For example Google Docs the only external data source currently available does not
have a function to transpose the data. The transpose option is available among the gadget settings
(almost at the bottom of the gadget options frame) when adding the gadget to the spreadsheet.</p><br/>

<b>Interactively changing gadget settings</b><br/>
<p>Using Google Docs it is not possible to change the gadget settings without losing all changes that
have been made in the visualisation. That means if changes like filters, swapped axes, hidden
data,... have been made they will be reset when changing the gadget parameters with the default
Google gadget settings. This is due to the fact that a new gadget request is sent by Google and the
visualisation is created once again.</p>

<p>Using the Options Panel the user is able to change the parameters dynamically while
exploring the data. This is done through a separate gadget settings menu displayed to the left side
of the visualisation.</p><br/>
<br/>

<h2 class="title">Data Format</h2>
<p>The data format of this visualisation can be seen in the <a href="dataformats.html#chart">data formats document</a>.</p>
<br /><br />



<h2 class="title">Parameter List</h2>

<table width="1290" border="1">
  <tr>
    <td width="65" align="center">Number</td>
    <td width="225" align="left">Parameter</td>
    <td width="98" align="center">Type</td>
    <td width="163" align="center">Options</td>
    <td width="705" align="left">Description</td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td align="left">X-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The x-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td align="left">Y-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The y-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td align="left">Display Percentage</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">The percent option only applies for stacked area charts. By enabling this option the stacked area is
created using percentages instead of total values.</td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td align="left">Shorten Factor</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The values of the y-axis are divuded by the supplied shorten factor and an abbreviation is used to symbolise this shorten factor.</td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td align="left">X-Axis Label Style</td>
    <td align="center">String</td>
    <td align="center">Centered | Line Break | Vertical | 45 Degrees</td>
    <td align="left">Determines the label style of the x-axis ticks.</td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td align="left">Legend</td>
    <td align="center">String</td>
    <td align="center">No Legend | Horizontal | Vertical</td>
    <td align="left">Determines the legend position.</td>
  </tr>
  <tr>
    <td align="center">7</td>
    <td align="left">Y-Title</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Title to be displayed on the y-axis.</td>
  </tr>
  <tr>
    <td align="center">8</td>
    <td align="left">X-Title</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Title to be displayed on the x-axis.</td>
  </tr>
  <tr>
    <td align="center">9</td>
    <td align="left">Title</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Diagram Title - displayed above the visualisation.</td>
  </tr>
  <tr>
    <td align="center">10</td>
    <td align="left">Display Type</td>
    <td align="center">String</td>
    <td align="center">Stacked | Overlay</td>
    <td align="left">Diagram Title - displayed above the visualisation.</td>
  </tr>
  <tr>
    <td align="center">11</td>
    <td align="left">Number Display Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Defines how numbers are to be displayed within the diagram.</td>
  </tr>
  <tr>
    <td align="center">12</td>
    <td align="left">Show Area Names</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the entities area labels.</td>
  </tr>
  <tr>
    <td align="center">13</td>
    <td align="left">Shorten Factor X</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The shorten factor applied to x-axis tick labels. Only applicable on numeric values.</td>
  </tr>
  <tr>
    <td align="center">14</td>
    <td align="left">Line Break Signs</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Used for the "Line Break x-axis label style. Each of the supplied characters will force a line break in the label.</td>
  </tr>
  <tr>
    <td align="center">15</td>
    <td align="left">Number Input Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Determines the format in which the supplied data is formatted.</td>
  </tr>
  <tr>
    <td align="center">16</td>
    <td align="left">Transpose Data</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether the data is transposed or not.</td>
  </tr>
  <tr>
    <td align="center">17</td>
    <td align="left">Host URL</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">URL of the gadget. There needs to be a colour scheme file available at "./common/color-schemes.xml" or the standard colour scheme will be used. 
The precompiled font files which can be loaded on runntime have to be stored in "./common/fonts/".</td>
  </tr>
  <tr>
    <td align="center">18</td>
    <td align="left">Show Title</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the diagram title.</td>
  </tr>
  <tr>
    <td align="center">19</td>
    <td align="left">Show X-Title</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the x-axis title.</td>
  </tr>
  <tr>
    <td align="center">20</td>
    <td align="left">Show Y-Title</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the y-axis title.</td>
  </tr>
  <tr>
    <td align="center">21</td>
    <td align="left">Use Ratio</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether to use a custom display ratio or not. If yes, x-ratio and y-ratio need to be supplied also.</td>
  </tr>
  <tr>
    <td align="center">22</td>
    <td align="left">X-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Width ratio factor.</td>
  </tr>
  <tr>
    <td align="center">23</td>
    <td align="left">Y-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Height ratio factor.</td>
  </tr>
</table>

</body>
</html>
